<template>
  <DataTable url="#(firstToLowerCase(table.name))/list" ref="ds" pageable>
    <template #('#')tools="table">
      <Button #if(option.isGenPriv())v-if="ADD" #end icon="jeicon-add" color="primary" @click="add">新增</Button>
      <Button #if(option.isGenPriv())v-if="EDIT" #end :disabled="selects.length!=1" icon="h-icon-edit" text-color="yellow" @click="editFirst">修改</Button>
      <Poptip #if(option.isGenPriv())v-if="DELETE" #end :disabled="selects.length==0" class="h-btn h-btn-red" content="确定删除所选记录？" @confirm="del">
        <Button icon="h-icon-trash" :disabled="selects.length==0" color="red">删除</Button>
      </Poptip>
      #if(option.isGenExport())<Button icon="h-icon-outbox" @click="exports" :disabled="ds.loading">导出</Button>#end
    </template>
    <template #('#')search="table">
#for(column:table.columns)#if(column.isSearchCondition())
#switch(column.ControlType)
#case('Select')
      <Select v-model="table.params.#(column.field)" #(column.viewOpt) placeholder="#(column.Name)" @change="search" filterable></Select>
#case('Checkbox')
      <Checkbox v-model="table.params.#(column.field)" #(column.viewOpt) placeholder="#(column.Name)" @change="search"></Checkbox>
#case('Radio')
      <Radio v-model="table.params.#(column.field)" #(column.viewOpt) placeholder="#(column.Name)" @change="search"></Radio>
#case('TextArea')
      <Search v-model="table.params.#(column.field)"  placeholder="#(column.Name)" @search="search"></textarea>
#case('Date')
      <DatePicker v-model="table.params.#(column.field)" placeholder="#(column.Name)" @change="search"></DatePicker>
#case('Time')
      <DatePicker v-model="table.params.#(column.field)" type="time" placeholder="#(column.Name)" @change="search" hasSeconds></DatePicker>
#case('DateTime')
      <DatePicker v-model="table.params.#(column.field)" type="datetime" placeholder="#(column.Name)" @change="search" hasSeconds></DatePicker>
#default
#if(column.DataType==12)
      <DatePicker v-model="table.params.#(column.field)" type="datetime" placeholder="#(column.Name)" @change="search" hasSeconds></DatePicker>
#else
      <Search  v-model="table.params.#(column.field)" placeholder="#(column.Name)" @search="search"/>
#end
#end
#end#end
    </template>
        <template #('#')default="table">
        #if(option.isGenExport())
        <!--文件拖拽导入-->
        <FileDrop class="list" @drop="doImport" accept=".xlsx">
        #end
          <Table :datas="table.data" :loading="table.loading" @trDblClick="edit" @select="selected" checkbox>
            <TableItem title="序" prop="_index" :width="40"></TableItem>
            #for(column:table.columns)#if(column.isVisibleInList())
            #switch(column.ControlType)
            #case('Select','Checkbox','Radio')
            <TableItem title="#(column.Name)" prop="#(column.field)" #(column.viewOpt)></TableItem>
            #case('Date')
            <TableItem title="#(column.Name)" prop="#(column.field)" :format="format('yyyy-MM-dd')"></TableItem>
            #case('Time')
            <TableItem title="#(column.Name)" prop="#(column.field)" :format="format('hh:mm:ss')"></TableItem>
            #case('DateTime')
            <TableItem title="#(column.Name)" prop="#(column.field)" :format="format('yyyy-MM-dd hh:mm')"></TableItem>
            #default
            <TableItem title="#(column.Name)" prop="#(column.field)" #if(column.DataType==12):format="format('yyyy-MM-dd hh:mm')"#end></TableItem>
            #end
            #end#end
          </Table>
        #if(option.isGenExport())
        </FileDrop>
        #end
        </template>
  </DataTable>
  <Dialog href="#(table.module)/#(firstToLowerCase(table.name))Dialog.vue" ref="dlg" hasDivider hasCloseIcon>
    <template #('#')header>#(table.title)</template>
    <template #('#')footer="dlg">
      <Button @click="dlg.cancel">取消</Button>
      <Button :loading="dlg.loading" color="primary" @click="dlg.submit">确认</Button>
    </template>
  </Dialog>
</template>
<script setup>
import {ajax,util,hasPermission,format} from 'framework'
import {ref} from 'vue'

#if(option.isGenExport())
import FileDrop from '../coms/FileDrop.vue'
#end
#if(option.isGenPriv())
//权限
const ADD=hasPermission('#(table.Priv).add'),EDIT=hasPermission('#(table.Priv).edit'),DELETE=hasPermission('#(table.Priv).delete')
#end

//数据集
const ds=ref({})
const showSearch=ref(false),selects=ref([]);
//对话框的引用,可通过dlg.value.ref获取页面的引用
const dlg=ref({})

function search(){
    selects.value=[]
    ds.value.reload()
}

function selected(v){
    selects.value=v.map(it=>util.fields(it,'#(table.pks)'))
}

async function add(){
   await dlg.value.open()
   search()
}

function editFirst(){
    if(selects.value.length==0){
        return;
    }
    edit(selects.value[0])
}

async function edit(v){
    #if(option.isGenPriv())
    if(!EDIT){
        return;
    }
    #end
    await dlg.value.open(util.fields(v,'#(table.pks)'))
    search()
}

async function del(){
    #if(option.isGenPriv())
    if(!DELETE){
        return;
    }
    #end
    await ajax.post('#(firstToLowerCase(table.name))/delete',selects.value.map(it=>it.#(table.firstPk().field)))
    search()
}
#if(option.isGenExport())
function exports(){
    //导出全部满足条件的数据
    ajax.download('#(firstToLowerCase(table.name))/export',ds.value.params)
}
function doImport(e){
    #if(option.isGenPriv())
    if(!ADD){
        e.fail()
        return;
    }
    #end
    ajax.upload('#(firstToLowerCase(table.name))/import',{file:e.file})
    .then(r=>{
        e.success()
        search()
    }).catch(e=>e.fail())
    .finally(()=>e.success())
}
#end
</script>
